<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="18">
        <div class="title">
          <h3>销售数据 <span class="spanSize">{{ startMonth|formatDate }} - {{ startDate |formatDate }}</span></h3>
        </div>
      </el-col>
      <el-col :span="6" class="rightWord">
        <div class="week-month-year">
          <el-tabs v-model="activeName" type="card" class="el-tabs__nav2" @tab-click="handleClick">
            <!-- 周 -->
            <el-tab-pane label="周" class="item" value="周" />
            <!--月 -->
            <el-tab-pane label="月" class="item" value="月" />
            <!-- 年 -->
            <el-tab-pane label="年" class="item" value="年" />
          </el-tabs>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex">
      <!-- 折线图 -->
      <el-col>
        <div ref="chart" style="height: 330px;" />
      </el-col>
      <!-- 柱形图 -->
      <el-col>
        <div ref="columnChart" style="height: 330px;" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { SummaryReportAPI, AreaReportAPI } from '@/api/SummaryInformation'
import moment from 'moment'
export default {
  name: 'SalesData',

  data() {
    return {
      startDate: '',
      startMonth: '',
      startWeek: '',
      startYear: '',
      salesNum: [],
      salesDay: [],
      salesArea: [],
      activeName: '0'
    }
  },
  created() {
    this.getTime()
  },
  mounted() {
    this.getLineChart()
    this.getColumnChart()
  },

  methods: {
    getTime() {
      // 现在时间
      this.startDate = moment().format('YYYY-MM-DD')
      // 本月4.1
      this.startMonth = moment().month(moment().month()).startOf('month').format('YYYY-MM-DD')
      // 本周
      this.startWeek = moment().startOf('week').add(1, 'days').format('YYYY-MM-DD')
      // 本年
      this.startYear = moment().year(moment().year()).startOf('year').format('YYYY-MM-DD')
    },
    // 获取折线图的数据（周数据）
    async   getLineChart() {
      const result = []
      const res = await SummaryReportAPI(+this.activeName + 1, this.startWeek, this.startDate)
      this.salesNum = res.data.series.map(element => {
        return +(element / 100).toFixed(2)
      })
      this.salesDay = res.data.xAxis
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

      for (let i = 0; i < this.salesDay.length; i++) {
        const date = new Date(this.salesDay[i])
        const weekday = weekdays[date.getDay()]
        result.push(weekday)
      }
      const myChart = echarts.init(this.$refs.chart)
      const option = {
        title: {
          left: 'center',
          text: '销售额趋势图'
        },
        xAxis: {
          type: 'category',
          data: result
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        // 线条颜色
        color: ['#FF3333'],
        // 提示框 设置了才会出现
        tooltip: {
          show: true
        },
        series: [
          {
            data: this.salesNum, // 每条数据
            type: 'line',
            smooth: true,
            // 区域颜色
            areaStyle: {
            // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#FF9999' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#FFFFFF' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 获取柱形图数据（周数据）
    async   getColumnChart() {
      const res = await AreaReportAPI(this.startWeek, this.startDate)
      this.salesNum = res.data.series.map(element => {
        return +(element / 100).toFixed(2)
      })
      this.salesArea = res.data.xAxis
      const myChart = echarts.init(this.$refs.columnChart)
      const option = {
        title: {
          left: 'center',
          text: '销售额分布'
        },
        xAxis: {
          type: 'category',
          // data: ['北京平西府街道', '霍营街道']
          data: this.salesArea
        // data: JSON.parse(JSON.stringify(this.salesArea))
        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        // 提示框 设置了才会出现
        tooltip: {
          show: true
        },
        series: [
          {
          // data: [3000, 5005],
            data: this.salesNum,
            type: 'bar',
            barWidth: 20, // 柱图宽度
            itemStyle: { // 柱状颜色和圆角
              color: '#99CCFF',
              barBorderRadius: [5, 5, 0, 0] // （顺时针左上，右上，右下，左下）
            }

          }
        ]

      }

      option && myChart.setOption(option)
    },
    // 获取折线图的数据（月数据）
    async getLineChartsMonth() {
      const res = await SummaryReportAPI(+this.activeName, this.startMonth, this.startDate)
      this.salesNum = res.data.series.map(element => {
        return +(element / 100).toFixed(2)
      })
      // 需要转换为年月日
      this.salesDay = res.data.xAxis
      const result = []
      for (let i = 0; i < this.salesDay.length; i++) {
        const date = new Date(this.salesDay[i])
        const month = date.getMonth() + 1
        const day = date.getDate()
        const date_str = month + '月' + day + '日'
        result.push(date_str)
      }
      const myChart = echarts.init(this.$refs.chart)
      const option = {
        title: {
          left: 'center',
          text: '销售额趋势图'
        },
        xAxis: {

          type: 'category',
          data: result
        },
        yAxis: {
          name: '单位：元',
          type: 'value'

        },
        // 线条颜色
        color: ['#FF3333'],
        // 提示框 设置了才会出现
        tooltip: {
          show: true
        },
        series: [
          {
            data: this.salesNum, // 每条数据
            type: 'line',
            smooth: true,
            // 区域颜色
            areaStyle: {
            // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#FF9999' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#FFFFFF' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 获取柱形图数据（月数据）
    async   getColumnChartMonth() {
      const res = await AreaReportAPI(this.startMonth, this.startDate)
      this.salesNum = res.data.series.map(element => {
        return +(element / 100).toFixed(2)
      })
      this.salesArea = res.data.xAxis
      const myChart = echarts.init(this.$refs.columnChart)
      const option = {
        title: {
          left: 'center',
          text: '销售额分布'
        },
        xAxis: {
          type: 'category',

          data: this.salesArea

        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        // 提示框 设置了才会出现
        tooltip: {
          show: true
        },
        series: [
          {

            data: this.salesNum,
            type: 'bar',
            barWidth: 20, // 柱图宽度
            itemStyle: { // 柱状颜色和圆角
              color: '#99CCFF',
              barBorderRadius: [5, 5, 0, 0] // （顺时针左上，右上，右下，左下）
            }

          }
        ]

      }

      option && myChart.setOption(option)
    },
    // 获取折线图的数据（年数据）
    async getLineChartsYear() {
      const res = await SummaryReportAPI(+this.activeName, this.startYear, this.startDate)
      this.salesNum = res.data.series.map(element => {
        return +(element / 100).toFixed(2)
      })
      // 需要转换为几年几月
      this.salesDay = res.data.xAxis
      const result = []
      for (let i = 0; i < this.salesDay.length; i++) {
        const splits = this.salesDay[i].split('-0')
        const date_str = splits[0] + '年' + splits[1] + '月'
        result.push(date_str)
      }
      const myChart = echarts.init(this.$refs.chart)
      const option = {
        title: {
          left: 'center',
          text: '销售额趋势图'
        },
        xAxis: {

          type: 'category',
          data: result
        },
        yAxis: {
          name: '单位：元',
          type: 'value'

        },
        // 线条颜色
        color: ['#FF3333'],
        // 提示框 设置了才会出现
        tooltip: {
          show: true
        },
        series: [
          {
            data: this.salesNum, // 每条数据
            type: 'line',
            smooth: true,
            // 区域颜色
            areaStyle: {
            // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#FF9999' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#FFFFFF' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }

      option && myChart.setOption(option)
    },
    // 获取柱形图数据（年数据）
    async   getColumnChartYear() {
      const res = await AreaReportAPI(this.startYear, this.startDate)
      this.salesNum = res.data.series.map(element => {
        return +(element / 100).toFixed(2)
      })
      this.salesArea = res.data.xAxis
      const myChart = echarts.init(this.$refs.columnChart)

      const option = {

        title: {
          left: 'center',
          text: '销售额分布'
        },
        xAxis: {
          type: 'category',

          data: this.salesArea

        },
        yAxis: {
          name: '单位：元',
          type: 'value'
        },
        grid: {
          top: '18%',
          left: '16%', // 原来是10%，修改为20%
          right: '2%',
          bottom: '24%'
        },
        // 提示框 设置了才会出现
        tooltip: {
          show: true
        },
        series: [
          {

            data: this.salesNum,
            type: 'bar',
            barWidth: 20, // 柱图宽度
            itemStyle: { // 柱状颜色和圆角
              color: '#99CCFF',
              barBorderRadius: [5, 5, 0, 0] // （顺时针左上，右上，右下，左下）
            }

          }
        ]

      }

      option && myChart.setOption(option)
    },
    // 点击周月年
    handleClick() {
      if (this.activeName === '0') {
        // 周数据
        this.getLineChart()
        this.getColumnChart()
      } else if (this.activeName === '1') {
        // 月数据
        this.getLineChartsMonth()
        this.getColumnChartMonth()
        console.log('月')
      } else if (this.activeName === '2') {
        // 年数据
        this.getLineChartsYear()
        this.getColumnChartYear()
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.sku-sale-collect {

display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;

flex-direction: column;
height: calc(40vh - 68px);
min-height: 352px;
margin-top: 20px;
background: #fff;
border-radius: 20px;
.title h3 {
margin: 0;
padding: 0;
.spanSize {
  font-weight: normal;
  color: #666;
  font-size: 12px;
}
}
.rightWord {
text-align: right;
.week-month-year {
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
margin-left: 45px;
::v-deep .el-tabs--card>.el-tabs__header {
border: none;
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav {
border: none

}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item {
border: none
}
.el-tabs__nav2 {
height: 40px;
background: rgba(233,243,255,.37);
border-radius: 10px;
.top {
  display: inline-block;
margin-left: 10px;
text-align: center;
font-size: 12px;
font-family: zihun143-zhengkuchaojihei,zihun143;
font-weight: 400;

line-height: 14px;
}
.top1 {
  width: 21px;
height: 20px;
background: url('~@/assets/common/jiangbei.png');
color: #8e5900;
}
.user-name {
  height: 20px;
font-size: 14px;
font-family: PingFangSC-Medium,PingFang SC;
font-weight: 500;
color: #333;
line-height: 20px;
margin-left: 20px;
}
.work-count {
  height: 20px;
font-size: 14px;
font-family: PingFangSC-Regular,PingFang SC;
font-weight: 400;
color: #737589;
line-height: 20px;
text-align: right;
}
}
::v-deep .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
background: #e7e5e5;
-webkit-box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
box-shadow: 0 0 4px 0 rgba(0,0,0,.11);
 border-radius: 7px;
font-weight: 600;
color: #333;
}

.tips {
text-align: center;
}
}
}
}
</style>
